<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/css/responsive.css">

		<link href="__PUBLIC__/static/user/old/font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<!-- ANIMATE -->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/css/animatecss/animate.min.css" />
		<!-- DATE RANGE PICKER -->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
		<!-- TODO -->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/js/jquery-todo/css/styles.css" />
		<!-- FULL CALENDAR -->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/js/fullcalendar/fullcalendar.min.css" />
		<!-- GRITTER -->
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/js/gritter/css/jquery.gritter.css" />
		<script src="__PUBLIC__/static/user/old/layui/layui.js" charset="UTF-8"></script>
		<link href="__PUBLIC__/static/user/old/layui/css/layui.css" rel="stylesheet" media="all">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/user/old/js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
		<style type="text/css">
			.navbar .nav.navbar-nav.pull-right {
				min-width: 135px;
			}
		</style>
	</head>

	<body>
		<!-- HEADER -->
		<header class="navbar clearfix" id="header">
			<div class="container">
				<div class="navbar-brand">
					<!-- COMPANY LOGO -->
					<!-- /COMPANY LOGO -->
					<!-- TEAM STATUS FOR MOBILE -->
					<div class="visible-xs">
						<a href="#" class="team-status-toggle switcher btn dropdown-toggle">
							<i class="fa fa-users"></i>
						</a>
					</div>
					<!-- /TEAM STATUS FOR MOBILE -->
					<!-- SIDEBAR COLLAPSE -->
					<div id="sidebar-collapse" class="sidebar-collapse btn">
						<i class="fa fa-bars" data-icon1="fa fa-bars" data-icon2="fa fa-bars"></i>
					</div>
					<!-- /SIDEBAR COLLAPSE -->
				</div>
				<!-- NAVBAR LEFT -->
				
				<!-- /NAVBAR LEFT -->
				<!-- BEGIN TOP NAVIGATION MENU -->
				<ul class="nav navbar-nav pull-right">
					<!-- BEGIN NOTIFICATION DROPDOWN -->
					<!-- END NOTIFICATION DROPDOWN -->
					<!-- BEGIN INBOX DROPDOWN -->

					<!-- END TODO DROPDOWN -->
					<!-- BEGIN USER LOGIN DROPDOWN -->
					
					<li class="dropdown user" id="header-user" style="float: right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							 <img alt="" src="__PUBLIC__/static/user/headimg/{$Think.session.user_photo}" /> 
							<span class="username">{$Think.session.user_name}</span>
							<i class="fa fa-angle-down"></i>
						</a>
						<ul class="dropdown-menu">
							<li>
								<a href="{:url('User/mine')}" style="font-size: 14px;font-family: '微软雅黑';"><i class="fa fa-cog"></i>修改账户信息</a>
							</li>
							<li>
								<a href="{:url('User/ext')}" style="font-size: 14px;font-family: '微软雅黑';"><i class="fa fa-power-off"></i>退出登录</a>
							</li>
						</ul>
					</li>
					<li class="dropdown user" style="float: right">
						<a href="mai" style="font-size: 14px;font-family: '微软雅黑';">首页</a>
					</li>
					<!-- END USER LOGIN DROPDOWN -->
				</ul>
				<!-- END TOP NAVIGATION MENU -->
			</div>
		</header>
		<!-- PAGE -->

		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<!-- <div class="col-md-10"> -->
				<div class="sidebar-menu nav-collapse">
					<div class="divide-20"></div>
					<!-- /SEARCH BAR -->

					<!-- SIDEBAR MENU -->
					<ul>
						<li class="active">
							<a href="mine">
								<i class="fa fa-tachometer fa-fw"></i>
								<span class="menu-text" style="font-size: 18px;font-family: '微软雅黑';">我的信息</span>
								<span class="selected"></span>
							</a>
						</li>
						<li>
							<a href="security">
								<i class="fa fa-bookmark-o fa-fw"></i>
								<span class="menu-text" style="font-size: 18px;font-family: '微软雅黑';">安全设置</span>
								<span class="selected"></span>
							</a>
						</li>
						

					</ul>
				</div>
			</div>
		</section>
		<div id="main-content">

			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">
						<div class="row">
							<div class="col-sm-12">
								<div class="page-header">

								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-12">
								<!-- BOX-->

								<div class="box border blue">
									<div class="box-title">
										<h4><i class="fa fa-table"></i>我的信息</h4>

									</div>
									<div class="box-body">
										<form id="form" class="form-horizontal" role="form">
											<div class="form-group">
												<label class="col-sm-4 control-label" style="font-size: 14px;font-family: '微软雅黑';">头像</label>
												<div class="col-sm-1">
													<img id="head_img" width="75%" height="75%" src="__PUBLIC__/static/user/headimg/{$user.user_photo}" />
												</div>
												<!--<input type="button" id="change" class="btn btn-default" onclick="show()" value="更换头像"></input>-->
												<input id="display" name="display" type="file" onchange="preImg(this.id,'head_img')" />
											</div>
											<div class="form-group">
												<label class="col-sm-4 control-label" style="font-size: 14px;font-family: '微软雅黑';">昵称</label>
												<div class="col-sm-5">
													<input type="text" value="{$user.user_name}" required="" maxlength="20" class="form-control" id="nickname" name="nickname">
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-4 control-label" style="font-size: 14px;font-family: '微软雅黑';">个人签名</label>
												<div class="col-sm-5">
													<input type="text" value="{$user.motto}" required="" maxlength="30" class="form-control" id="motto" name="motto">
												</div>
											</div>
											<div class="form-group">
												<label class="col-sm-4 control-label" style="font-size: 14px;font-family: '微软雅黑';">手机号</label>
												<div class="col-sm-5">
													<input type="text" disabled="" class="form-control" value="{$user.user_phone}" id="phone" name="phone">
												</div>
											</div>
											<div class="form-group">
												<div class="col-sm-offset-6 col-sm-3">
													<input type="submit" value="保存设置" class="btn btn-danger" style="font-size: 14px;font-family: '微软雅黑';">
												</div>
											</div>
											
										</form>

									</div>
								</div>

							</div>
						</div>
						<!-- </section> -->
						<!-- /BOX -->
					</div>
					<!-- /SIDEBAR MENU -->
				</div>
			</div>
			<!-- </div> -->

			<script src="__PUBLIC__/static/user/old/js/jquery/jquery-2.0.3.min.js"></script>
			<!-- JQUERY UI-->
			<script src="__PUBLIC__/static/user/old/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
			<!-- BOOTSTRAP -->
			<script src="__PUBLIC__/static/user/old/bootstrap-dist/js/bootstrap.min.js"></script>

			<!-- DATE RANGE PICKER -->
			<script src="__PUBLIC__/static/user/old/js/bootstrap-daterangepicker/moment.min.js"></script>

			<script src="__PUBLIC__/static/user/old/js/bootstrap-daterangepicker/daterangepicker.min.js"></script>
			<!-- SLIMSCROLL -->
			<script type="text/javascript" src="__PUBLIC__/static/user/old/js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
			<script type="text/javascript" src="__PUBLIC__/static/user/old/js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
			<!-- COOKIE -->
			<script type="text/javascript" src="__PUBLIC__/static/user/old/js/jQuery-Cookie/jquery.cookie.min.js"></script>
			<!-- CUSTOM SCRIPT -->
			<script src="__PUBLIC__/static/user/old/js/script.js"></script>
			<script>
				jQuery(document).ready(function() {
					// App.setPage("widgets_box");  //Set current page
					App.init(); //Initialise plugins and elements
				});
				function getFileUrl(sourceId) {
					var url;
					if(navigator.userAgent.indexOf("MSIE") >= 1) { // IE  
						url = document.getElementById(sourceId).value;
					} else if(navigator.userAgent.indexOf("Firefox") > 0) { // Firefox  
						url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
					} else if(navigator.userAgent.indexOf("Chrome") > 0) { // Chrome  
						url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
					}
					return url;
				}
				function checkimg(){
					var path=document.getElementById('display').value;
					var point=path.lastIndexOf('.');
					var type=path.substr(point);
					if(type==".bmp"||type==".jpg"||type==".gif"||type==".JPG"||type==".GIF"||type==".PNG"||type==".png"){
						if(document.getElementById('display').files[0].size<1024*1024*2){
							return true;
						}
						else{
							alert('图片应在大小在2M以内，请重新上传！');
							document.getElementById('display').value="";
							return false;
						}
						
					}
					else{
						alert("图片格式错误！");
						document.getElementById('display').value="";
						return false;
					}
					
				}
				function preImg(sourceId, targetId) {
					if(checkimg()){
						var url = getFileUrl(sourceId);
						var imgPre = document.getElementById(targetId);
						imgPre.src = url;
					}
				}
				$('#form').submit(
					function(e){
						e.preventDefault();
						var fd=new FormData($('#form')[0]);
						$.ajax({
							type:"post",
							url:"saveInfo",
							async:true,
							data:fd,
							processData:false,
							contentType:false,
							success:function(r){
								var message="";
								if(r.nickname==0){
									message+="昵称修改失败，该昵称已经被其他用户使用！\n";
								}
								if(r.headimg==0){
									message+="头像上传失败！";
								}
								if(message==""){
									message="修改成功！";
								}
								alert(message);
								location.href="mine";//window.href="mine";
							},
							error:function(r){
								alert("服务器出现未知错误！");
								location.href="mine";
							}
						});
						
					}
				);
			</script>
	</body>

</html>